<%@ page import="com.blog.service.BlogService"%>
<%@ page import="com.blog.service.impl.BlogServiceImpl"%>
<%@ page import="com.blog.service.PhotoService"%>
<%@ page import="com.blog.service.impl.PhotoServiceImpl"%>
<%@ page import="com.blog.service.RightService"%>
<%@ page import="com.blog.service.impl.RightServiceImpl"%>
<%@ page import="com.blog.entity.Blog"%>
<%@ page import="java.util.List"%>
<%@ page import="com.blog.util.MarkDownUtil"%>
<%@ page import="com.blog.util.Page"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>}">

<%
    //分页
    int start = 0;
    int count = 6;
    int pageNumber=1;
    try {

        pageNumber=Integer.parseInt(request.getParameter("page"));
        start = Integer.parseInt(request.getParameter("page.start"));
        count = Integer.parseInt(request.getParameter("page.count"));

    } catch (Exception e) {

    }
    Page pageBreak = new Page(start, count,pageNumber);


    BlogService blogService=new BlogServiceImpl();
    PhotoService photoService=new PhotoServiceImpl();
    RightService rightService=new RightServiceImpl();

    //分页
    pageBreak.setTotal(blogService.selAllBlogCount());
    request.setAttribute("pageBreak", pageBreak);
    request.setAttribute("ShowBlogByPage", selAllBlogToHtml(blogService.selBlogByPage(pageBreak.ToStart(pageBreak.getPageNumber(),pageBreak.getCount()), pageBreak.getCount())));

    request.setAttribute("right",rightService.selRight());
    request.setAttribute("ShowArchives",selAllBlogToHtml(blogService.selAllBlog()));
    request.setAttribute("HeaderPhoto",photoService.selPhoto(1));
    request.setAttribute("showArchivesCount",blogService.selAllBlogCount());
%>
<%!
    public static List<Blog> selAllBlogToHtml(List<Blog> list){
        for(Blog blog:list){
            blog.setContent(MarkDownUtil.mdToHtml(blog.getContent()));
        }
        return list;
    }
%>
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>时间轴</title>
<meta name="description">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="blog/img/favicon.png">
<link rel="stylesheet" href="blog/css/index.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css">
<style type="text/css">
#nav {
	opacity: 1
}

.justified-gallery img {
	opacity: 1
}
/* 背景 */
#page-header {
	background-image: url(blog/img/目录.jpg);
	background-attachment: local !important;
}

#page-header.full_page {
	height: 50vh !important;
}

.pageJump {
	display: inline-block;
	padding-left: 0;
	margin: 0px 0px 0px 60px;
	border-radius: 4px;
	vertical-align: top;
}

.pageJump input {
	width: 40px;
}

.pageJump .button, .pageJump input {
	font-size: 16px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #337ab7;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}
</style>
<script src="blog/./js/global_config.js"></script>
<script id="config_change" src="blog/./js/global_change.js"></script>
<script src="blog/./js/set_theme.js"></script>
<meta name="generator" content="Hexo 5.1.1">
</head>
<body>
	<!-- 引入头部 -->
	<jsp:include page="header.jsp" flush="true" />
	<div id="body-wrap">
		<main class="layout_page" id="content-inner">
		<div class="recent-posts" id="recent-posts">
			<div id="archive">
				<div class="article-sort-title">文章总览 -
					${requestScope.showArchivesCount}</div>
				<div class="article-sort">
					<div class="article-sort-item year">2020</div>
					<c:forEach items="${requestScope.ShowBlogByPage}" var="blog"
						begin="0" end="${pageBreak.count}" step="1">
						<div class="article-sort-item">
							<a class="article-sort-item-img"
								href="BlogShowServlet?blogID=${blog.id}" title="${blog.title}"><img
								src="${blog.photo}" alt="${blog.title}"
								onerror="this.onerror=null;this.src='blog/img/404.jpg'"></a>
							<div class="article-sort-item-info">
								<div class="article-sort-item-time">
									<i class="far fa-calendar-alt"></i>
									<time class="post-meta-date-created"
										datetime="2020-09-07T09:26:15.103Z"
										title="发表于 ${blog.uploadTime}">${blog.uploadTime}</time>
								</div>
								<a class="article-sort-item-title"
									href="BlogShowServlet?blogID=${blog.id}" title="${blog.title}">${blog.title}</a>
							</div>
						</div>
					</c:forEach>
				</div>
				<!-- 				//分页 -->
				<nav id="pagination">
					<div class="pagination">
						<a class="extend prev" id="prevBlogPage" rel="prev"
							href="blog/archives.jsp?page=${pageBreak.pageNumber-1}"> <i
							class="fa fa-fw fa-chevron-left" aria-hidden="true"></i>
						</a> <a id="FirstPage" class="page-number current"
							href="blog/archives.jsp?page=1">1</a>
						<c:forEach begin="2" end="3" step="1" varStatus="var">
							<a class="page-number"
								href="blog/archives.jsp?page=${var.current}">${var.current}</a>
						</c:forEach>

						<c:if
							test="${pageBreak.getTotalPage()>3&&pageBreak.pageNumber-2>3}">
							<a class="space">&hellip;</a>
						</c:if>

						<c:if test="${pageBreak.pageNumber>3}">

							<c:if test="${pageBreak.pageNumber!=4}">
								<a class="page-number"
									href="blog/archives.jsp?page=${pageBreak.pageNumber-1}">${pageBreak.pageNumber-1}</a>
							</c:if>

							<c:if test="${pageBreak.getTotalPage()!=pageBreak.pageNumber}">
								<a class="page-number"
									href="blog/archives.jsp?page=${pageBreak.pageNumber}">${pageBreak.pageNumber}</a>
							</c:if>

							<c:if test="${pageBreak.getTotalPage()>pageBreak.pageNumber+1}">
								<a class="page-number"
									href="blog/archives.jsp?page=${pageBreak.pageNumber+1}">${pageBreak.pageNumber+1}</a>
							</c:if>

						</c:if>

						<c:if
							test="${pageBreak.getTotalPage()>3&&pageBreak.pageNumber!=pageBreak.getTotalPage()&&pageBreak.pageNumber+3<pageBreak.getTotalPage()}">
							<a class="space">&hellip;</a>
						</c:if>

						<c:if test="${pageBreak.getTotalPage()>3}">
							<a class="page-number"
								href="blog/archives.jsp?page=${pageBreak.getTotalPage()}">${pageBreak.getTotalPage()}</a>
						</c:if>

						<a class="extend next" id="nextBlogPage" rel="next"
							href="blog/archives.jsp?page=${pageBreak.pageNumber+1}"> <i
							class="fa fa-fw fa-chevron-right" aria-hidden="true"></i>
						</a>

						<%--                    <input type="text" name="gotoPage" placeholder="请输入要跳转的页数">--%>
						<div class="pageJump">
							<span>跳转到</span> <input type="text" id="goToPage" name="goToPage"
								value="" /> <span>页</span>
							<button type="button" class="button" onclick="goToPage()">确定</button>
						</div>
					</div>



				</nav>

			</div>
		</div>
		<!-- 	引入侧边栏 --> <jsp:include page="right.jsp" flush="true" /> </main>
	</div>
	<!-- 引入页脚 -->
	<jsp:include page="footer.jsp" flush="true" />
	</div>
	<section id="rightside">
		<div id="rightside-config-hide">
			<button id="darkmode" type="button" title="浅色和深色模式转换">
				<i class="fas fa-adjust"></i>
			</button>
		</div>
		<div id="rightside-config-show">
			<button id="rightside_config" type="button" title="设置">
				<i class="fas fa-cog"></i>
			</button>
			<button id="go-up" type="button" title="回到顶部">
				<i class="fas fa-arrow-up"></i>
			</button>
		</div>
	</section>
	<div>
		<script src="blog/js/jquery.min.js"></script>
		<script
			src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
		<script src="blog/js/utils.js"></script>
		<script src="blog/js/main.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/typed.js"></script>
		<script
			src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
	</div>



	<script>


    $(function () {
    	 //分页
        //跳转到指定页
        function goToPage() {

            var pageNum=$("#goToPage").val();

            pageNum=parseInt(pageNum);

            window.location.href="blog/archives.jsp?page="+pageNum;
        }



        //得到后的页码  分页
        var sub=(window.location+"").split("=");

        if(sub[1]!="1"){
            $("#FirstPage").removeClass("current");
        }

        if(sub[1]==undefined){
            $("#FirstPage").addClass("current");
        }
        //为改页码加入样式
        $(".pagination a").each(function () {
            if($(this).html()==sub[1]){
                $(this).addClass("current");
            }
        })

        if(sub[1]=="1"||sub[1]==undefined){
            $("#prevBlogPage").css("display","none");
        }


        if(sub[1]=="${pageBreak.getTotalPage()}"){
            $("#nextBlogPage").css("display","none");
        }

        $(".pagination a").each(function () {
            if(parseInt($(this).html())>parseInt("${pageBreak.getTotalPage()}")){
                $(this).css("display","none");
            }
        })



        $("ul.pagination li.disabled a").click(function () {
            return false;
        });

        $(".pagination a").each(function () {
            if(parseInt($(this).html())>parseInt("${pageBreak.getTotalPage()}")){
                $(this).css("display","none");
            }
        })
      



        var date = new Date();
        var year = date.getFullYear();
        $("#getFullYear").val(year);

        $("#site_title").html("时间轴");
        //顶部背景图片
        //$(".not-index-bg").css("background-image","url("+"${requestScope.HeaderPhoto.aboutPhoto}"+")");

    })
</script>
</body>

</html>